import React, { Component } from 'react'
import { Card, Button, Modal } from 'antd'
import './index.less'

class Modals extends Component{
    state = {
        showModal1: false,
        showModal2: false,
        showModal3: false,
        showModal4: false
    }
    handleOpen = (type) => {
        this.setState({
            [type]: true
        })
    }
    handleConfirm = (type) => {
        console.log(type)
        Modal[type]({
            title: '确认',
            content: '是否关闭当前弹窗?',
            onOk() {
                console.log('ok')
            },
            onCancel() {
                console.log('cancel')
            }
        })
    }

    render() {
        return (
            <div>
                <Card title="基础模态框" className="card-wrap">
                    <Button type="primary" onClick={() => this.handleOpen('showModal1')}>Open</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal2')}>自定义页脚</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal3')}>顶部吸附</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal4')}>水平垂直</Button>
                </Card>
                
                <Card title="信息确认框" className="card-wrap">
                    <Button type="primary" onClick={() => this.handleConfirm('confirm')}>Confirm</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('info')}>Info</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('success')}>Success</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('warning')}>Warning</Button>
                </Card>

                <Modal
                    title="Open"
                    visible={this.state.showModal1}
                    onCancel={()=> {
                        this.setState({
                            showModal1: false
                        })
                    }}
                 >
                    <p>这是一个Open</p>
                </Modal>

                <Modal
                    title="自定义页脚"
                    visible={this.state.showModal2}
                    okText="确定"
                    cancelText="取消"
                    onCancel={()=> {
                        this.setState({
                            showModal2: false
                        })
                    }}
                 >
                    <p>这是一个自定义页脚</p>
                </Modal>

                <Modal
                    style={{top: 20}}
                    title="顶部吸附"
                    visible={this.state.showModal3}
                    okText="好的"
                    cancelText="算了"
                    onCancel={()=> {
                        this.setState({
                            showModal3: false
                        })
                    }}
                 >
                    <p>这是一个顶部吸附</p>
                </Modal>

                <Modal
                    title="水平垂直"
                    wrapClassName="vertical-center-modal"
                    visible={this.state.showModal4}
                    okText="提交"
                    cancelText="放弃"
                    onCancel={()=> {
                        this.setState({
                            showModal4: false
                        })
                    }}
                 >
                    <p>这是一个水平垂直</p>
                </Modal>

            </div>
        )
    }
}

export default Modals